import React, { memo, useState } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import {
  ArtistInfoWrapper,
  TabsWrapper,
  ItemWrapper
} from './style'
import { tabsContent } from '@/services/local-data'
import ArtistSong from '../artist-song'
import ArtistMv from '../artist-mv'
import ArtistAlbum from '../artist-album'
import ArtistIntro from '../artist-intro'
export default memo(function ArtistInfo() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const { artistDetail } = useSelector(state => ({
    artistDetail: state.getIn(['artist','artistDetail'])
  }), shallowEqual)
  const info = artistDetail || {}
  const chooseTab = index => {
    setCurrentIndex(index)
  }
  const renderContent = () => {
    switch (currentIndex) {
      case 0:
        return <ArtistSong/>
      case 1:
        return <ArtistAlbum/>
      case 2:
        return <ArtistMv/>
      case 3:
        return <ArtistIntro/>
      default:
        return 
    }
  }
  return (
    <ArtistInfoWrapper>
      <h2 className='title'>{info.name}</h2>
      <img src={info.cover} alt="" />
      <TabsWrapper>
        <div className="tabs">
          {
            tabsContent.map(item => {
              return (
                <ItemWrapper className="item" key={item.key} isActive={currentIndex === item.key} onClick={e => chooseTab(item.key)}>{item.name}</ItemWrapper>
              )
            })
          }
        </div>
        <div className="content">
          {
            renderContent()
          }
        </div>
      </TabsWrapper>
    </ArtistInfoWrapper>
  )
})
